<template>
  <div class="item" @mouseover="mouseover" @mouseleave="mouseleave" @click="click">
    <img :src="url" alt="">
    <span :style="'text-shadow: 0 0 20px '+ color +';'">{{ data.name }}</span>
  </div>
</template>

<script>
export default {
  name: 'Item',
  props: {
    data: Object,
  },
  data() {
    return {
      url: require('../../assets/category/category.png'),
      color: '#00b9ec',
    };
  },
  methods: {
    click() {
      this.$router.push({
        path: '/task',
        query: {
          category: this.data.t,
          complexity: 1
        }
      })
    },
    mouseover() {
      this.url = require('../../assets/category/category_hover.png');
      this.color = '#f4d351';
    },
    mouseleave() {
      this.url = require('../../assets/category/category.png');
      this.color = '#00b9ec';
    },
  },
};
</script>

<style scoped>

.item {
  font-size: 0;
  position: relative;
  display: inline-block;
  text-align: center;
  flex: 1;
  color: #fff;
  margin: 2.5%;
  user-select: none;
  cursor: pointer;
}

.item img {
  width: 100%;
}

.item span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -56%);
  width: 9vw;
  word-break: break-all;
  font-size: 3vw;
  font-family: DINPro-Bold;
}
</style>
